<template>
	<view>
	<div class="share-list-header">
		<header class="default-header">
			<h1>
				<span class="logo"></span> 
				<div class="banner">
					<span class="banner_title">{{name}}</span> 
					<span class="banner_sub-title">{{signature}}</span>
				</div>
			</h1>
		</header> 
	</div>
	
	<div class="multifile">
		<div class="file-list">
			<div class="show-item">
				<block v-for="(item, index) in downList" :key="index">
				<div class="m-item">
					<div class="file-content">
						<div class="file-icon" style="background-image: url(../static/down.png);">
						</div>
						<div class="file">
							<p class="file-name">
								{{item.name}}
							</p>
							<p class="file-time">
								<span class="time">{{item.time}}</span>
								<span class="size">{{item.size}}</span>
							</p>
						</div>
						<div class="xqbotboxR">
						  <div class="a2 sizetype" @click="downloadClick(item.url)">立即下载</div>
						</div>
					</div>
				</div>
				</block >

			</div>
		</div>
	</div>
	
	<footer class="xqbotbox">
		  <div class="xqbotbox0">
			<div class="xqbotboxL">
				<div class="li">
				  <img src="/static/help.png">
				  <p>帮助</p>
				</div>
			</div>
			
		  </div>
	</footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileType: "file",
				name:'未知用户',
				signature:'没有个性的签名',
				downList:[
				]
			};
		},
		async onLoad({url, pwd}) {
			if(!url){
				uni.navigateBack({
					delta: 1
				})
			}else{
				console.log(url, pwd)
				await this.parseLanzou(url, pwd)
			}
		},
		// 函数
		methods: {
			async downloadClick(url){
				
				console.log("url", url)
				vk.showLoading('下载中...');
				if(this.fileType=="file"){
					window.location.href = url
				}else{
					let parseRes = await vk.callFunction({
						url: "client/pub.lanzou.parse",
						data: {
							url:url
						}
					})
					window.location.href = parseRes.durl
				}
				vk.hideLoading();
				
			},
			// 解析页面
			async parseLanzou(url, pwd) {
				vk.showLoading('解析中...');
				let parseRes = await vk.callFunction({
					url: "client/pub.lanzou.parse",
					data: {
						url: url,
						pwd: pwd
					}
				})
				console.log("parseRes", parseRes)
				if(parseRes.filetype=="file"){
					this.name = parseRes.shareUser
					this.downList.push({
						name: parseRes.filename ,
						time: parseRes.uploadtime,
						size: parseRes.filesize,
						url: parseRes.durl
					})
				}else{
					this.fileType = parseRes.filetype;
					parseRes.data.forEach(item=>{
						this.downList.push({
							name: item.name,
							time: item.time,
							size: item.size,
							url: item.url
						})
					})
				}
				vk.hideLoading();
			}
		},
	}
</script>

<style lang="scss">
body, uni-page-body{ 
	width:100%; 
	max-width:640px; 
	margin:0 auto;
}
.default-header{
    background-color: #fff;
}
header{
	display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    padding: 15px 0;
    height: 33px;
    font-size: 0;
    z-index: 9;
    width: 100%;
    max-width: 638px;
    border-left: 1px solid #f6f6f6;
    border-right: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
	h1{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    left: '.3rem';
	}
	h1 .logo{
	    display: inline-block;
	    width: 68rpx;
	    height: 56rpx;
	    background-image: url();
	    background-repeat: no-repeat;
	    background-size: 68rpx 56rpx;
		margin-left: 15px;
	}
	h1 .banner{
		display: inline-block;
		padding-left: 24rpx;
	}
	h1 .banner_title{
	    display: block;
	    font-size: 28rpx;
	    color: #333333;
	    font-weight: bold;
	}
	h1 .banner_sub-title{
	    display: block;
	    font-size: 24rpx;
	    color: #afb3bf;
	}
}
.content{
    position: relative;
}
.multifile{
	border-right: 1px solid #f6f6f6;
	border-left: 1px solid #f6f6f6;
}
.subscribe-container {
    position: absolute;
    top: 37rpx;
    right: 30rpx;
}
.subscribe-container .add-btn {
    height: 56rpx;
    line-height: 56rpx;
    padding: 0 20rpx;
    font-weight: normal;
}

.file-list{
	width:100%;
	height:100vh;
	overflow-x:hidden;
	overflow-y:scroll
}
.file-list .show-item{
	position:relative;
	width:100%;
	top: 70px;
}

.m-item{
	box-sizing:border-box;
	width:100%;
	height: auto;
	left:0;
	top:0
}
.m-item.highlight{
	background:#f0faff
}
.m-item .m-tombstone{
	box-sizing:border-box;
	position:absolute;
	width:100%;
	display:flex;
	padding:15px 0px
}
.m-item .m-tombstone .icon-tombstone{
	width:41px;
	height:41px;
	margin-right:16px;
	background-color:#fafafb
}
.m-item .m-tombstone .file-tombstone{
	flex:1;
	display:flex;
	flex-direction:column
}
.m-item .m-tombstone .file-tombstone p{
	display:inline-block;
	margin-top:4px;
	width:40%;
	height:15px;
	background:#fafafb;
	border-radius:8px
}
.m-item .m-tombstone .file-tombstone p[data-v-6080f9ce]:nth-child(1) {
	width:50%
}
.m-item .file-content{
	box-sizing: border-box;
    position: relative;
    width: 100%;
    display: flex;
    padding: 0 5px 10px;
}
.m-item .file-content .file-icon{
    position: absolute;
    top: 0;
    left: auto;
    width: 50px;
    height: 50px;
    margin-right: 16px;
    background-size: 100%;
    border-radius: 4px;
}
.m-item .file-content .file{
	box-sizing:border-box;
	padding:0 0 0 50px;
	box-sizing:border-box;
	flex:1;
	display:flex;
	flex-direction:column
}
.m-item .file-content .file .file-name{
    max-width: 100%;
    overflow: hidden;
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #212732;
}
.m-item .file-content .file .file-time{
	flex:1;
	font-size:12px;
	line-height:20px;
	color:#8F949F
}
.m-item .file-content .file .file-time .size{
	flex:1;
	font-size:12px;
	margin-left:8px;
	color:#8F949F
}
.m-item .file-content .file-select{
	top:50%;
	transform:translate(0,-50%);
	position:absolute;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-left:0.6rem
}

.xqbotbox{width:100%;max-width:640px;margin: 0 auto;background: #fff;}
.xqbotbox0{
	height: 60px;
    position: fixed;
    width: 100%;
    max-width: 638px;
    bottom: 0;
    background: #fff;
    z-index: 99999;
    border-top: 1px solid #f6f6f6;
    border-right: 1px solid #f6f6f6;
    border-left: 1px solid #f6f6f6;}
.xqbotboxL{ float:left; width:40%;height:60px; overflow:hidden}
.xqbotboxL .li{
	float: left;
    height: 60px;
    overflow: hidden;
    text-align: center;
    left: 15px;
    position: absolute;
}
.xqbotboxL .li img{
	height: 20px;
    padding-top: 10px;
}
.xqbotboxL .li p{    
	text-align: center;
    color: #666;
    font-size: 12px;
    text-align: center;
    line-height: 14px;
}
.xqbotboxR{ float:right; width:60%;height:60px; overflow:hidden}
.xqbotboxR .a1{ color:#ff2150; border:1px solid #ff2150; border-radius:3px; box-sizing:border-box; height:2.2rem; line-height:2.2rem; font-size:0.8rem; display:block; float:right; margin-right:1rem; width:5rem ; margin-top:0.4rem; text-align:center}
.xqbotboxR .a2{
	border: 1px solid #0055ff;
	background: #0055ff;
	color: #fff;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	display: block;
	float: right;
	width: 160px;
	text-align: center;
	box-sizing: border-box;
	margin-top: 10px;
	margin-right: 15px;
	border-radius: 50px;
}

</style>
